<template>
  <el-form class="right-reposts">
    <el-divider content-position="center">内容设置</el-divider>
    <switch-normal v-if="componentData.dataKeys && componentData.dataKeys.name" label="显示用户描述信息" v-model="commonAttr.isUserDescription" @change="onChangeAttr"></switch-normal>
    <switch-normal label="显示自定义的博文" v-model="commonAttr.isCustomText" @change="onChangeAttr"></switch-normal>
    <input-normal v-if="commonAttr.isCustomText" label="自定义的博文前缀" v-model="commonAttr.textPrefix" @change="onChangeAttr"></input-normal>
    
    <div v-if="(events.reposts || events.user)" class="margin-left-right-16 margin-bottom-10">
      <p class="margin-bottom-10">选择需要显示的内容(需添加用户信息事件)</p>
      <el-checkbox-group v-model="dataKeys">
        <el-checkbox v-for="(label, index) in REPOSTS_KEYS" :key="index" :label="label" ></el-checkbox>
      </el-checkbox-group>
    </div>
    <color-normal v-model="commonAttr.repostsNameColor" label="博文昵称颜色" :format="'rgb'" @change="onChangeAttr"></color-normal>
    <el-button type="primary"  @click.stop="onAddWbItem" class="margin-bottom-10 margin-left-right-16"><el-icon><i class="jy-icon-plus"></i></el-icon>增加内容</el-button>
    <el-collapse v-model="activeNames">
      <el-collapse-item v-for="(item, index) in eventWbLists" :name="index+1" :key="index">
        <template #title>博文{{index+1}}<i class="jy-icon-delete el-collapse-item__arrow" @click.stop="onDeleteWbItem($event, index)"></i>
        </template>
        <div v-if="commonAttr.itemType == COMMON_ITEM_TYPE_MAP.qsdsVote || commonAttr.itemType == COMMON_ITEM_TYPE_MAP.common" class="margin-top-10">
          <input-normal label="mid" v-model="item.mid" @change="onUpdateWbItem(index)"></input-normal>
          <add-img-con :url="item.url" picAttr="url" :event="event" :index="index" :isCrop='false' :height="100" :width="260" class="margin-left-right-16"></add-img-con>
          <input-normal label="图片" v-model="item.url" @change="onUpdateWbItem(index)"></input-normal>
          <add-img-con :url="item.otherUrl" picAttr="otherUrl" :event="event" :index="index" :isCrop='false' :height="100" :width="260" class="margin-left-right-16"></add-img-con>
          <input-normal label="其他图片" v-model="item.otherUrl" @change="onUpdateWbItem(index)"></input-normal>
          <textarea-normal label="博文标题" placeholder="默认内容，或样式调试" v-model="item.push_title" @change="onUpdateWbItem(index)"></textarea-normal>
          <textarea-normal label="博文内容" placeholder="通过mid可以自动获取内容，或默认内容，或样式调试" v-model="item.push_text" @change="onUpdateWbItem(index)"></textarea-normal>
          <textarea-normal label="图片或空白区域跳转链接" v-model="item.link" @change="onUpdateWbItem(index)"></textarea-normal>
        </div>
        <div v-else-if="commonAttr.itemType == COMMON_ITEM_TYPE_MAP.vote" class="margin-top-10">
          <input-normal label="mid" v-model="item.mid" @change="onUpdateWbItem(index)"></input-normal>
          <textarea-normal label="博文内容" placeholder="通过mid可以自动获取内容，或默认内容，或样式调试" v-model="item.push_text" @change="onUpdateWbItem(index)"></textarea-normal>
          <textarea-normal label="图片或空白区域跳转链接" v-model="item.link" @change="onUpdateWbItem(index)"></textarea-normal>
        </div>
        <div v-else-if="commonAttr.itemType == COMMON_ITEM_TYPE_MAP.headerFooter" class="margin-top-10">
          <input-normal label="mid" v-model="item.mid" @change="onUpdateWbItem(index)"></input-normal>
          <input-normal label="mids" placeholder="mid用,分隔" v-model="item.mids" @change="onUpdateWbItem(index)"></input-normal>
          <add-img-con :url="item.url" picAttr="url" :event="event" :index="index" :isCrop='false' :height="100" :width="260" class="margin-left-right-16"></add-img-con>
          <p class="margin-left-right-16">折叠图片</p>
          <add-img-con :url="item.foldUrl" picAttr="foldUrl" :event="event" :index="index" :isCrop='false' :height="100" :width="260" class="margin-left-right-16"></add-img-con>
        </div>
        <div v-else>
          <input-normal label="mid" v-model="item.mid" @change="onUpdateWbItem(index)"></input-normal>
          <!-- <input-normal label="关注follow_uid" v-model="item.follow_uid" @change="onUpdateWbItem(index)"></input-normal> -->
          <add-img-con :url="item.url" picAttr="url" :event="event" :index="index" :isCrop='false' :height="100" :width="260" class="margin-left-right-16"></add-img-con>
          <textarea-normal label="博文内容" placeholder="通过mid可以自动获取内容，或默认内容，或样式调试" v-model="item.push_text" @change="onUpdateWbItem(index)"></textarea-normal>
        </div>
        <textarea-normal v-if="commonAttr.isUserDescription" label="用户描述信息" v-model="item.userDescription" @change="onUpdateWbItem(index)"></textarea-normal>
      </el-collapse-item>
    </el-collapse>
  </el-form>
</template>
<script>
  import InputNormal from '@/views/components/edit/InputNormal.vue'
  import SwitchNormal from '@/views/components/edit/SwitchNormal.vue'
  import AddImgCon from '@/views/components/add-img-con.vue'
  import TextareaNormal from '@/views/components/edit/TextareaNormal.vue'
  import ColorNormal from '@/views/components/edit/ColorNormal.vue'
  import { mapState } from 'vuex'
  import { addUtils } from '@/views/js/add-utils'
  import { editUtils } from '@/views/js/edit-utils'
  import { dataUtils } from '@/views/js/data-utils'
  import { PAGINATION_TYPE } from '@/common/const'
  import { COMMON_ITEM_TYPE_MAP } from '@/const/'

  import { REPOSTS_KEYS } from '@/common/data-drive-ui'
  

  export default {
    mixins: [addUtils, editUtils, dataUtils],
    setup () {
      return {
        PAGINATION_TYPE: PAGINATION_TYPE,
        COMMON_ITEM_TYPE_MAP: COMMON_ITEM_TYPE_MAP,
        REPOSTS_KEYS: REPOSTS_KEYS,
      }
    },
    components: {
      AddImgCon,
      InputNormal,
      SwitchNormal,
      TextareaNormal,
      ColorNormal
    },
    computed:{
      ...mapState({
        btn: (state) => _.cloneDeep(state.components.currentComponentData.btn),
      }),
    },
  }
</script>
